<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>java</title>
    <link rel="stylesheet" th:href="@{/css/myStyle.css}"/>
</head>
<body>
    <div class="n-head">
        <div class="g-doc f-cb">
            <div class="user">
                买家你好，<span class="name">buyer</span>！<a href="/logout">[退出]</a>
            </div>
            <ul class="nav">
                <li><a href="/">首页</a></li>
                <li><a href="/bill">账务</a></li>
                <li><a href="/preorder">购物车</a></li>
            </ul>
        </div>
    </div>
    <div class="g-doc">
        <div class="n-show f-cb" id="showContent">
            <div class="img">
                <img th:src="@{${commodity.picUrl}}" onerror="javascript:this.src = '/image/NoPic.png';" alt="" >
            </div>
            <div class="cnt">
                <h2 th:text="${commodity.title}">test0</h2>
                <p class="summary" th:text="${commodity.summary}">有兄弟在测么，我给你上的买了，再给你发一个</p>
                <div class="price">
                    <span class="v-unit">¥</span>
                    <span class="v-value" th:text="${commodity.price}">321</span>
                </div>
                <div class="num" id="num">
                    购买数量：
                    <span id="plusNum" class="lessNum" onclick="minusOne(this)"><a>-</a></span>
                    <span class="totalNum" id="allNum">1</span>
                    <span id="addNum" class="moreNum" onclick="addOne(this)"><a>+</a></span>
                </div>
                <div class="oprt f-cb" id="notHave">
                    <button class="u-btn u-btn-primary" id="add" data-id="86" data-title="test0" data-price="321" onclick="addShoppingChart()">
                        加入购物车
                    </button>
                </div>

                <div class="oprt f-cb" id="have" style="display: none">
                    <span class="u-btn u-btn-primary z-dis">已购买</span>
                    <span class="buyprice" id="purchasedPrice">当时购买价格：¥113.56</span>
                </div>
            </div>
        </div>
        <div class="m-tab m-tab-fw m-tab-simple f-cb">
            <h2>详细信息</h2>
        </div>
        <div class="n-detail" th:text="${commodity.description}">
            有兄弟在测么，我给你上的买了，再给你发一个
        </div>
    </div>
    <div class="n-foot">
        <p>
            杭研有数：陈佳——在校作业
        </p>
    </div>

    <script>
        var num = 1;
        var divNum = document.getElementById("num");
        var divChart = document.getElementById("notHave");
        var divParchased = document.getElementById("have");

        var purchasedPrice = document.getElementById("purchasedPrice");

        function addOne(obj) {
            obj.parentElement.children[1].textContent++
            console.log(++num);
        }

        function minusOne(obj) {
            if(--num > 0){
                obj.parentElement.children[1].textContent = num;
            }else{
                num++;
            }
            console.log(num);
        }

        function addShoppingChart() {
            var id = [[${commodity.id}]];
            var tip = document.getElementById("tip");
            if(!tip){
                tip = document.createElement("div");
                tip.innerHTML = "<div id='tip' class=\"v-load v-load-result\"><div class=\"load\"><i></i><b>成功加入购物车</b></div></div>";
                document.body.appendChild(tip);
            }else{
                tip.style.display = "inline";
            }
            window.setTimeout(function () {
                var tip = document.getElementById("tip");
                tip.style.display = "none";
            }, 1500);
            window.location.href="/addOrder?id=" + id + "&num=" + num;
        }

        (function () {
            if("[[${purchasedPrice}]]"){
                divNum.style.display='none';
                divChart.style.display='none';
                divParchased.style.display='block';
                purchasedPrice.textContent = "当时购买价格：¥" + "[[${purchasedPrice}]]";
            }else{
                divNum.style.display='block';
                divChart.style.display='block';
                divParchased.style.display='none';
            }
        })();
    </script>
</body>
</html>